<!--
 * @Author: cest
 * @Date: 2022-08-03 08:17:27
 * @LastEditTime: 2022-08-05 18:17:09
 * @LastEditors: cest
 * @FilePath: /vue3-todo-list/src/App.vue
 * @Description: 编辑描述内容
-->
<template lang="pug">
el-row(justify="center")
  el-col(:xs="24")
    Header
    el-card
      template(v-if="todoList.length>0")
        List(:todoList="todoList")
        el-divider(style="margin:10px 0")
        Footer
      el-empty(v-else)
        el-button(
          type="primary"
          :loading="isReset"
          @click="resetAndFreshEventHandler")
          | 重新刷新
</template>
<script>
import {
  ref, getCurrentInstance, onMounted
} from 'vue'

import { useStore } from 'vuex'
import Header from './components/Header/index.vue'
import List from './components/List/index.vue'
import Footer from './components/Footer/index.vue'

import { MAP } from './store/modules/todo'
import { useState } from './hooks/useState'
import { useGetters } from './hooks/useGetters'
import { mapHelper } from './hooks/useMapper'

export default {
  setup(props, ctx) {
    console.log('props', props)
    console.log('ctx', ctx)

    const isReset = ref(false)
    console.log('isReset', isReset)

    const store = useStore()
    console.log('store', store)

    const storeState2 = useState(MAP.NAMESPACED, {
      todoList: [MAP.TODO_LIST],
      doneTodoList: state => {
        console.log('state2:', state)
        return state[MAP.DONE_TODO_LIST]
      }
    })

    const storeGetter1 = useGetters(MAP.NAMESPACED, [MAP.FULL_NAME])

    // 重置
    const resetAndFreshEventHandler = async e => {
      console.log('resetAndFreshEventHandler e', e)
      store.commit(mapHelper(MAP.NAMESPACED, MAP.RESET_TODOS))
    }

    const instance = getCurrentInstance()
    onMounted(() => {
      console.log('onMounted:', instance)
      console.log('storeGetter1', storeGetter1)
      console.log('store', store)
    })

    return {
      Header,
      List,
      Footer,
      isReset,
      resetAndFreshEventHandler,
      ...storeState2,
      ...storeGetter1
    }
  }
}
</script>
